import React from 'react';
import { ImagePicker, WingBlank, SegmentedControl, NoticeBar } from 'antd-mobile';

const data = [{
    url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
    id: '2121',
}, {
    url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
    id: '2122',
}];

class ImagePickerExample extends React.Component {
    state = {
        length: 4,
        files: data,
        multiple: false,
    }
    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
        });
    }
    onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
            multiple: index === 1,
        });
    }

    render() {
        const { files } = this.state;
        return (<div>
            <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                为实现中华民族伟大的复兴而努力奋斗！为实现中华民族伟大的复兴而努力奋斗！为实现中华民族伟大的复兴而努力奋斗！
            </NoticeBar>

            <WingBlank>
                <SegmentedControl
                    values={['切换到单选', '切换到多选']}
                    selectedIndex={this.state.multiple ? 1 : 0}
                    onChange={this.onSegChange}
                />
                <ImagePicker
                    files={files}
                    onChange={this.onChange}
                    onImageClick={(index, fs) => console.log(index, fs)}
                    selectable={files.length < 10}
                    multiple={this.state.multiple}
                    length={this.state.length}
                />
            </WingBlank>
        </div>

        );
    }
}


export default ImagePickerExample;
